<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="DataList Repeat Direction and Repeat Count" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <h2>Showing Multiple Records per Row</h2>
    <AjaxData:DataList ID="DataList1" runat="server" DataKeyField="ID" AllowDragAndDrop="true" RepeatDirection="Horizontal" 
        CssClass="DataWebControlStyle" ItemDataBoundEvent="onItemDataBound" RepeatColumns="3" CellSpacing="0" CellPadding="3">
       <AlternatingItemStyle CssClass="AlternatingRowStyle" />
       <ItemStyle CssClass="RowStyle" />
       <HeaderStyle CssClass="HeaderStyle" />
       <FooterStyle CssClass="FooterStyle" />
        <ItemTemplate>
            <h4><span id="spnProductName"></span></h4>
            Available in the <span id="spnCategory"></span>
            store for <span id="spnUnitPrice"></span>
        </ItemTemplate>
    </AjaxData:DataList>
    <script type="text/javascript">

        function pageLoad(sender, e)
        {
            DataService.GetProductList(0, 100, '', '', onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            var dataList = DataList1;

            dataList.set_dataSource(result.Rows);
            dataList.dataBind();
        }

        function onItemDataBound(sender, e)
        {
            var item = e.get_item();

            if (item.get_isDataItemType())
            {
                var product = item.get_dataItem();

                var spnProductName = item.findControl('spnProductName');
                var spnCategory = item.findControl('spnCategory');
                var spnUnitPrice = item.findControl('spnUnitPrice');

                setText(spnProductName, product.Name);
                setText(spnCategory, product.CategoryName);
                setText(spnUnitPrice, product.UnitPrice.localeFormat('C'));
            }
        }

        function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
            else if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
        }

    </script>
</asp:Content>